<script setup>
import {ref} from 'vue';

let admin = ref(['primary', 'success', 'info', 'warning', 'danger']);
let user = ref(['primary', 'success']);

const checkPermission = (el, binding) => {
  const {value} = binding;
  const points = value; // 使用传入的权限值进行判断
  if (Array.isArray(value)) {
    console.log(value)
    const hasPermission = admin.value.some(point => points.includes(point));
    if (!hasPermission) {
      el.parentNode && el.parentNode.removeChild(el);
    }
  } else {
    throw new Error('v-permission value must be an array');
  }
}

const vPermissionDirective = {
  mounted(el, binding) {
    checkPermission(el, binding);
  },
  updated(el, binding) {
    checkPermission(el, binding);
  }
};
</script>

<template>
  <div class="mb-4">
    <el-button v-permission-directive="['primary']">Default</el-button>
    <el-button v-permission-directive="['primary', 'success']" type="primary">Primary</el-button>
    <el-button v-permission-directive="['primary', 'success', 'info', 'warning', 'danger']" type="success">Success
    </el-button>
    <el-button v-permission-directive="['Info']" type="info">Info</el-button>
    <el-button v-permission-directive="['warning']" type="warning">Warning
    </el-button>
    <el-button v-permission-directive="['danger']" type="danger">Danger</el-button>
  </div>
</template>

<style scoped>
/* 样式代码可以根据需要进行添加 */
</style>
